<template>

    <swiper :options="swiperOption" ref="mySwiper">
        <!-- slides -->
        <swiper-slide v-for="items in sli" :key="items.picUrl"><img v-lazy="items.picUrl" alt=""></swiper-slide>
        <!-- <swiper-slide>I'm Slide 2</swiper-slide>
        <swiper-slide>I'm Slide 3</swiper-slide>
        <swiper-slide>I'm Slide 4</swiper-slide> -->
        <!-- Optional controls -->
        <div class="swiper-pagination"  slot="pagination"></div>
        <!-- <div class="swiper-button-prev" slot="button-prev"></div>
        <div class="swiper-button-next" slot="button-next"></div>
        <div class="swiper-scrollbar"   slot="scrollbar"></div> -->
    </swiper>

</template>
<script>
    import { swiper, swiperSlide } from 'vue-awesome-swiper'
    import axios from 'axios'
    export default {
        // name: 'carrousel',
        data() {
            return {
                sli:"",
                swiperOption: {
                    notNextTick: true,
                    autoplay: {
                            stopOnLastSlide: true,
                            disableOnInteraction: false,
                            delay: 1500
                        },
                    speed: 1000,
                    // direction : 'vertical',
                    loop: true,
                    //    effect:"coverflow",
                    grabCursor : true,
                    setWrapperSize :true,
                    // autoHeight: true,
                    // paginationType:"bullets",
                    pagination : {
                        el: '.swiper-pagination',
                        clickable: true
                    },
                    paginationClickable :true,
                    //    prevButton:'.swiper-button-prev',
                    //    nextButton:'.swiper-button-next',
                    // scrollbar:'.swiper-scrollbar',
                    //mousewheelControl : true,
                    observeParents:true,
                    // if you need use plugins in the swiper, you can config in here like this
                    // 如果自行设计了插件，那么插件的一些配置相关参数，也应该出现在这个对象中，如下debugger
                    // debugger: true,
                    // swiper callbacks
                    // swiper的各种回调函数也可以出现在这个对象中，和swiper官方一样
                    // onTransitionStart(swiper){
                    //   console.log(swiper)
                    // },
                }
            }
        },
        components: {
            swiper,
            swiperSlide
        },
        computed: {
            swiper() {
                return this.$refs.mySwiper.swiper
            }
        },
        mounted() {
        // you can use current swiper instance object to do something(swiper methods)
        // 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
            // console.log('this is current swiper instance object', this.swiper)
        //    this.swiper.slideTo(3, 1000, false)
            // console.log('mounted');
            // console.log(this.sli);
            axios.get('https://www.easy-mock.com/mock/5aab25e6e80e0d51a5160fb3/music/data').then((response)=>{
                // this.sli = JSON.parse(response.data.data.slider);
                this.sli = response.data.data.slider;
                // console.log(response.data.data);
                // console.log(this.sli);
            }).catch(function (error) {
                console.log(error);
            });
        }
    }
</script>

<style lang="scss">
    @import '../css/swiper.min.css';
    .swiper-container{
        width: 100%;
        height: r(128px); 
    }
    img{
        width:100%
    }
</style>
